//消息通知
<template>
  <div class="contenBox">

    <div class="btn_box">
      <el-button type="primary">导出消息</el-button>
      <el-button type="danger">删除消息</el-button>
    </div>

    <!-- 标签页 -->
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="全部消息" name="first">
        <div class="tab_btn">
          <el-button type="primary" size="mini">标记已读</el-button>
          <el-button type="danger" size="mini">全部已读</el-button>
        </div>
        <div class="tab_box">
          <h3>消息标题</h3>
          <ul>
            <li>
              <!-- <div class="yuan"></div> -->
              <el-checkbox v-model="checked" />
              欢迎来到大马猴制作的ui标签后台模版
                <i style="color: #339dff" @click="goDetails">详情</i>
            </li>
            <li>
              <el-checkbox v-model="checked" />
              欢迎来到大马猴制作的ui标签后台模版
               <i style="color: #339dff" @click="goDetails">详情</i>
            </li>
            <li>
              <el-checkbox v-model="checked" />
              欢迎来到大马猴制作的ui标签后台模版
               <i style="color: #339dff" @click="goDetails">详情</i>
            </li>
          </ul>
        </div>
      </el-tab-pane>
      <el-tab-pane label="通知" name="second">
        <div class="tab_box">
          <h3>消息标题</h3>
          <ul>
            <li>
              <!-- <div class="yuan"></div> -->
              <el-checkbox v-model="checked" />
              欢迎来到大马猴制作的ui标签后台模版
            </li>
          </ul>
        </div>
      </el-tab-pane>
      <el-tab-pane label="已读消息" name="third">已读消息</el-tab-pane>
      <el-tab-pane label="未读消息" name="fourth">未读消息</el-tab-pane>
    </el-tabs>

    <!-- 分页 -->
    <div class="pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="query.pageNum"
        :page-sizes="[2, 3, 4, 5]"
        :page-size="query.pageSize"
        prev-text="上一页"
        next-text="下一页"
        layout=" prev, pager, next"
        :total="query.total"
      ></el-pagination>

      <div class="jumper">
        跳到第
        <input type="text" ref="pageNum" :value="query.pageNum" />
        页
      </div>
      <button @click="goPage">确定</button>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      activeName: "first",
      checked: true,
      query: {
        pageNum: 1,
        pageSize: 5,
        total: 0,
      },
    };
  },
  mounted() {},
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    // 点击每个li跳详情
    goDetails(){
         this.$router.push({
        path: `/messageArr/details`,
      });
    },
    // 分页
    // 改变每页条数
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.query.pageSize = val;
    },
    //切换页数，执行方法
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.query.pageNum = val;
    },
    goPage() {
      let { value } = this.$refs.pageNum;
      console.log("1", value);
      this.query.pageNum = Number(value);
    },
  },
};
</script>
<style lang="scss" scoped>
.contenBox {
  width: 97%;
  height: 100%;
  margin: 0 auto;
  background: #ffffff;
  border-radius: 10px;
  .btn_box {
    padding: 20px 20px;
  }
  .el-tabs {
    padding: 0px 15px;
    .el-tab-pane {
      .tab_box {
        // background: #ccc;
        h3 {
          margin-top: 10px;
        }
        ul {
          li {
            height: 30px;
            line-height: 30px;
            background: rgb(242, 242, 242);
            margin-top: 10px;
            //     .yuan{
            //     width: 5px;
            //     height: 5px;
            //     background: red;
            //     border-radius: 50%;
            //     box-sizing: border-box;
            // }
          }
        }
      }
    }
  }
  //   分页
  .pagination {
    display: flex;
    align-items: center;
    justify-content: right;
    margin-top: 20px;
    margin-right: 150px;
    .jumper {
      font-size: 14px;
      margin-left: 20px;
      margin-right: 10px;
      display: flex;
      align-items: center;
      input {
        width: 40px;
        height: 26px;
        margin: 0 5px;
        text-align: center;
        border: solid 1px #e6e6e6;
        border-radius: 5px;
        color: #666;
        outline-style: none;
      }
    }
    button {
      height: 28px;
      line-height: 28px;
      border-radius: 5px;
      background-color: #4895db;
      border: solid 1px #4895db;
      color: #fff;
      font-size: 14px;
      padding: 0 8px;
    }
  }
}
</style>